<template>
  <div class="goods app-wrapper">
    <div class="search-bar">
      <input type="text" class="input-text" placeholder="搜索商品">
      <i class="van-icon van-icon-search"></i>
    </div>
    <section class="goods-wrapper">
      <div class="media media-user">
        <div class="media-object"><img src="./img/giver_logo.jpg" alt=""></div>
        <h3 class="media-heading">名人字画私人订制</h3>
        <router-link to="/live" class="button">直播间主页</router-link>
      </div>
      <!-- /media-user -->
      <div class="tab tab-filter">
        <div class="tab-header">
          <ul class="clearfix">
            <li class="tab-header-item" 
              v-for="item in typesMap.lists"
              :key="item.id"
              :class="{'active': item.id == typesMap.selectedId}"
              @click.stop="switchType(item)"
            >{{item.name}}</li>
            <!-- <li class="tab-header-item">国画</li>
            <li class="tab-header-item">书法</li>
            <li class="tab-header-item">油画</li>
            <li class="tab-header-item">工笔</li> -->
          </ul>
        </div>
        <div class="tab-body clearfix">
          <router-link to="/gooddetail" class="goods-item media" 
            v-for="item in goodsList"
            :key="item.id"
          >
            <div class="media-object"><img :src="item.url" alt=""></div>
            <h4 class="media-heading">{{item.name}}</h4>
            <div class="media-desc text-right clearfix">
              <span class="red pull-left">￥{{item.price}}</span>
              <span class="origin">￥{{item.origin}}</span>
            </div>
          </router-link>

        </div>
      </div>
    </section>

    <div class="tool-bar">
      <div class="tool-bar-item"><i class="icon img-icon-chat"></i> 联系客服</div>
      <router-link to="/goodscar" class="tool-bar-item"><i class="icon img-icon-car"></i> 购物车</router-link>
      <router-link to="/goodorder" class="tool-bar-item"><i class="icon img-icon-order"></i> 我的订单</router-link>
    </div>
  </div>
</template>

<script>
let imgUrl = require('./img/goods_1.png');
export default {
  components: {},
  props: {},
  data() {
    return {
      typesMap: {
        selectedId: 0,
        lists:[
          {id: 0, name: '全部'},
          {id: 1, name: '国画'},
          {id: 2, name: '书法'},
          {id: 3, name: '油画'},
          {id: 4, name: '工笔'},
        ]
      },
      goodsList: [
        {id: 1, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 2, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 3, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 4, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 5, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 6, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
      ]
    };
  },
  computed: {},
  methods: {
    switchType(item){
      this.typesMap.selectedId = item.id;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import './index.scss';
$blue: #1549eb;
.search-bar{
  padding: 20px 50px;
  background-color: #f8f8f8;
  position: relative;
  font-size: 0;
  .van-icon {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
    font-size: 36px;
  }
  > .input-text {
    width: 100%;
    height: 60px;
    padding-left: 80px;
    font-size: 28px;
    line-height: 60px;
    background-color: #eceded;
    border-radius: 30px;
  }
}

.goods-wrapper {
  padding: 20px 35px 0;
  background: #fff;
}

.media-user {
  display: flex;
  padding: 10px 0;
  position: relative;
  align-items: center;
  .media-object{
    width: 80px;
    height: 80px;
    border: 1px solid #666;
    margin-right: 20px; 
    border-radius: 100%;
    font-size: 0;
    overflow: hidden;
  }

  .media-heading {
    font-size: 30px;
    color: #2a2a2a;
  }

  .button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate3d(0, -50%, 0);
    height: 54px;
    padding: 0 15px;
    font-size: 28px;
    color: #fff;
    line-height: 54px;
    border-radius: 27px;
    background-color: $blue;

  }
}


.tab-filter {
  .tab-header-item {
    float: left;
    padding: 25px 0;
    margin-right: 64px;
    font-size: 30px;
    line-height: 1.5;
    color: #2a2a2a;
    position: relative;

    &.active{
      color: $blue;
      &:after {
        content: '';
        display: block;
        width: 100%;
        height:4px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: $blue;
      }
    }
  }


  .tab-body {
    padding-top: 40px;
  }
}



.tool-bar {
  display: flex;
  width: 100%;
  height: 110px;
  font-size: 28px;
  line-height: 110px;
  position: fixed;
  left: 0;
  bottom: 0;

  > .tool-bar-item {
    flex: 1;
    text-align: center;
    color: #666;
    background-color: #fff;
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: #ccc;
      position: absolute;
      top: 0;
      left: 0;
    }
    .icon {
      display: inline-block;
      width: 40px;
      height: 40px;
      vertical-align: middle;
    }
  }
}
</style>